<script lang="ts" setup>
import { ref, onMounted, reactive, defineExpose } from "vue";
import * as echarts from "echarts";
import geoJSON from "./ningbo";
import { getMapData } from "@/api";
import mapIcon from "@/assets/组 7662.png";
import icon7713 from "@/assets/组 7713.png";
import icon7714 from "@/assets/组 7714.png";
import icon7717 from "@/assets/组 7717.png";
import icon7735 from "@/assets/组 7735.png";
import icon7715 from "@/assets/组 7715.png";
import icon7734 from "@/assets/组 7734.png";
import icon7719 from "@/assets/组 7719.png";
import icon7736 from "@/assets/组 7736.png";
import icon9659 from "@/assets/组 9659.png";
import iconText from "./iconText.vue";
import { sendMessage } from "../../hooks/message";
const echartsRef = ref<HTMLElement | null>(null);
const isShowTooltip = ref(false);
const isShow = ref(true);
const toggleIsShow = () => {
  isShow.value = !isShow.value;
};
const initData = async () => {
  const { data } = await getMapData();
  console.log({ data });
  return data;
};
const convertData = (data: any) => {
  let result: Array<{
    name: string;
    value: Array<any>;
    symbol: any;
    symbolSize: Array<number>;
  }> = [];
  data.forEach((element: any) => {
    result.push({
      name: element.marketnm,
      value: [
        element.lng,
        element.lat,
        element.jcpici,
        element.bhgSum,
        element.hglv,
      ],
      symbol: scatterIconUrl,
      symbolSize: [57, 77],
    });
  });
  return result;
};
const left = ref(0);
const top = ref(0);
const iconTop = ref(0);
const iconLeft = ref(0);
const form = reactive({
  marketName: "",
  jcpc: "",
  bhgs: "",
  hgl: "",
});
const marketTitles = reactive({
  jcxmAllSum: "", //检测项目总数
  jyhsum: "", //经营户总数
  yxAllSum: "", //阳性总数
  jclAllSum: "", //检测总批次
  jcypAllSum: "", //检测样品总数
  jcsAllSum: "", //检测室总数
  yxczlv: "", //阳性处置率
  jchglv: "", //检测合格率
});
const scatterIconUrl = "image://" + mapIcon;
const createOption = (hsMarketDto: any) => {
  let option = {
    tooltip: {
      trigger: "item",
      renderMode: "html",
      backgroundColor: "RGBA(8, 35, 81, 0.8)",
      borderColor: "#44e883",
      enterable: true,
      formatter: function (params: any) {
        if (params.componentSubType === "scatter") {
          const [lng, lat, jcpc, bhgs, hgl] = params.value;
          return `<span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #ffffff;'>市场名称：</span>
          <span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #f7e66d;'>${params.name}</span>
          <br/>
          <span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #ffffff;'>检测批次：</span>
          <span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #f7e66d;'>${jcpc}</span>
          <br/>
          <span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #ffffff;'>疑似阳性数: </span>
          <a onclick="jump('${params.name}')"><span id="bhgs_id" style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #f7e66d;cursor:pointer;'>${bhgs}</span></a>
          <br/><span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #ffffff;'>合格率: </span>
          <span style='font-size: 14px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #f7e66d;'>${hgl}</span>`;
        }
      },
      position: ["50%", "5%"],
    },
    geo: [
      {
        map: "ningbo",
        roam: true,
        center: [121.37, 29.83],
        zoom: 6,
        label: {
          show: true,
          color: "#FFFFFF",
          fontFamily:
            "SourceHanSansCN-Light-GBpc-EUC-H-, SourceHanSansCN-Light-GBpc-EUC-H",
          fontSize: 14,
        },
        emphasis: {
          disabled: true,
        },
        tooltip: {
          show: true,
          textStyle: {
            color: "#FFF",
          },
        },
        regions: [
          {
            name: "海曙区",
            itemStyle: {
              areaColor: "#394FB2",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "江北区",
            itemStyle: {
              areaColor: "#61A2F2",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "北仑区",
            itemStyle: {
              areaColor: "#2C55DE",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "镇海区",
            itemStyle: {
              areaColor: "#5C9BF8",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "鄞州区",
            itemStyle: {
              areaColor: "#4167E1",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "奉化区",
            itemStyle: {
              areaColor: "#64B4F9",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "象山县",
            itemStyle: {
              areaColor: "#3459D3",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "宁海县",
            itemStyle: {
              areaColor: "#394FB2",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "余姚市",
            itemStyle: {
              areaColor: "#5A79E2",
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "慈溪市",
            itemStyle: {
              areaColor: "#6AC1F8",
            },
            tooltip: {
              show: false,
            },
          },
        ],
      },
    ],
    series: [
      {
        name: "市场：",
        type: "scatter",
        coordinateSystem: "geo",
        data: convertData(hsMarketDto),
      },
    ],
  };
  return option;
};
const clickHandler = (compname: string | undefined) => {
  sendMessage("jump", "/system/ysjcsjyxcz", {
    quname: "海曙区",
  });
};
onMounted(async () => {
  const {
    hsMarketDto,
    jcxmAllSum,
    jyhsum,
    yxAllSum,
    jclAllSum,
    jcypAllSum,
    jcsAllSum,
    yxczlv,
    jchglv,
  } = await initData();
  marketTitles.jcxmAllSum = jcxmAllSum;
  marketTitles.jyhsum = jyhsum;
  marketTitles.yxAllSum = yxAllSum;
  marketTitles.jclAllSum = jclAllSum;
  marketTitles.jcypAllSum = jcypAllSum;
  marketTitles.jcsAllSum = jcsAllSum;
  marketTitles.yxczlv = yxczlv;
  marketTitles.jchglv = jchglv;
  window.jump = (val: any) => {
    sendMessage("jump", "/system/ysjcsjyxcz", {
      compname: val,
    });
  };
  const myChart = echarts.init(echartsRef.value!);
  echarts.registerMap("ningbo", JSON.stringify(geoJSON));
  let option = createOption(hsMarketDto);
  myChart.setOption(option);
  // myChart.on("click", (params: any) => {
  //   if (params.componentSubType === "scatter") {
  //     const { data } = params;
  //     let url = "image://" + mapIcon;
  //     console.log(params.event?.event);
  //     let seriesInfo = {
  //       name: "bigIcon",
  //       type: "scatter",
  //       coordinateSystem: "geo",
  //       data: [
  //         {
  //           name: (data as any).name,
  //           value: (data as any).value,
  //           symbol: url,
  //           symbolSize: [57, 78],
  //         },
  //       ],
  //     };
  //     option.series.push(seriesInfo as any);
  //     myChart.setOption(option);
  //     const { offsetX, offsetY } = params.event?.event as any;
  //     left.value = offsetX + 12;
  //     top.value = offsetY - 147 > 0 ? offsetY - 147 : 0;
  //     iconTop.value = offsetY - 50;
  //     iconLeft.value = offsetX - 29;
  //     form.marketName = params.name;
  //     form.jcpc = params.value[2];
  //     form.bhgs = params.value[3];
  //     form.hgl = params.value[4];
  //     isShowTooltip.value = true;
  //   } else {
  //     option.series = [option.series[0]];
  //     myChart.clear();
  //     myChart.setOption(option);
  //     isShowTooltip.value = false;
  //   }
  // });
});
defineExpose({
  toggleIsShow,
});
</script>
<template>
  <div class="container">
    <div
      class="echarts"
      ref="echartsRef"
      :style="{
        width: '100%',
        height: '100%',
      }"
    ></div>
    <div
      class="tooltip"
      :class="{ hidden: !isShowTooltip, active: isShowTooltip }"
      :style="{ top: top + 'px', left: left + 'px' }"
    >
      <div>
        <span class="form-title">市场名称：</span
        ><span class="form-value">{{ form.marketName }}</span>
      </div>
      <div>
        <span class="form-title">检测批次：</span
        ><span class="form-value">{{ form.jcpc }}</span>
      </div>
      <div>
        <span class="form-title">疑似阳性数：</span
        ><span class="form-value">{{ form.bhgs }}</span>
      </div>
      <div>
        <span class="form-title">合格率：</span
        ><span class="form-value">{{ form.hgl }}</span>
      </div>
    </div>
    <div class="left-top">
      <icon-text
        v-if="isShow"
        :imgUrl="icon7714"
        :num="marketTitles.jclAllSum"
        color="#1eeeff"
        title="检测总批次"
      ></icon-text>
      <icon-text
        v-if="isShow"
        :imgUrl="icon7713"
        :num="marketTitles.yxAllSum"
        color="red"
        title="疑似阳性数"
        @click="clickHandler"
        style="cursor: pointer"
      ></icon-text>
      <icon-text
        v-if="isShow"
        :imgUrl="icon7719"
        :num="marketTitles.yxczlv"
        color="#1eeeff"
        title="阳性处置率"
      ></icon-text>
      <icon-text
        v-if="isShow"
        :imgUrl="icon7736"
        :num="marketTitles.jchglv"
        color="#1eeeff"
        title="检测合格率"
      ></icon-text>
    </div>
    <div class="right-bottom" v-if="isShow">
      <icon-text
        :imgUrl="icon7735"
        :num="marketTitles.jyhsum"
        color="#1eeeff"
        title="经营户总数"
      ></icon-text>
      <icon-text
        :imgUrl="icon7717"
        :num="marketTitles.jcsAllSum"
        color="#1eeeff"
        title="检测室数量"
      ></icon-text>
      <icon-text
        :imgUrl="icon7734"
        :num="marketTitles.jcxmAllSum"
        color="#1eeeff"
        title="检测项目总数"
      ></icon-text>
      <icon-text
        :imgUrl="icon7715"
        :num="marketTitles.jcypAllSum"
        color="#1eeeff"
        title="检测样品种类"
      ></icon-text>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .tooltip {
    position: absolute;
    width: 194px;
    height: 112px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #44e883;
    background: #001f54;
    opacity: 0.5;
    z-index: 100;
    .form-title {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    .form-value {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #f7e66d;
    }
  }
  .icon {
    position: absolute;
    width: 57px;
    height: 78px;
    background-image: url("../../assets/组 7662.png");
  }
  .hidden {
    display: none;
  }
  .active {
    display: block;
  }
  .left-top {
    height: 100%;
    position: absolute;
    left: 2.3vw;
    top: 4vh;
    display: flex;
    flex-direction: column;
  }
  .right-bottom {
    height: 100%;
    position: absolute;
    right: 2.3vw;
    bottom: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
</style>
